<template>

  <el-carousel
      :interval="3000"
      type="card"
      height="200px"
      style="background-color: #ecb2e2;
      "
      motion-blur
      autoplay
      loop
      pause-on-hover
      card-scale="0.8"
  >
    <el-carousel-item v-for="(image, index) in dynamicImages"
                      :key="index"  >
      <img
          :src= image
          alt="本地轮播图"
      >
    </el-carousel-item>
  </el-carousel>
  <div style="display:flex" >
    <div style="width: 170px; border-right: 1px solid #dad2d2; min-height: calc(100vh - 60px)">
      <el-menu router style="border: 0">
        <el-menu-item style="text-align: center">
          <el-button text style="text-align: center; width: 120px" type="primary" title="要不要点点看呢" @click="hh">欢迎使用拼车通app</el-button>
        </el-menu-item>
        <el-menu-item  @click="router.push('/Home/manual')" class="leftb">
          <template #title>
            <el-icon><Menu style="color: #3b5d4b" /></el-icon>
            <span style="margin-left: 10px">首页</span>
          </template>
        </el-menu-item>
        <el-menu-item @click="router.push('/Home/runCar')" class="leftb" >
          <template #title>
            <el-icon><Position style="color: #0742b1"/></el-icon>
            <span>我要发起拼车</span>
          </template>
        </el-menu-item>
         <el-menu-item  @click="router.push('/Home/CarInformation')"  class="leftb">
          <template #title>
            <el-icon><TrendCharts style="color: #e6ce77"/></el-icon>
            <span>目前拼车情况</span>
          </template>
        </el-menu-item>
        <el-menu-item lass="leftb" @click="router.push('/Home/Person')">
          <template #title>
            <el-icon><HomeFilled style="color: #b790ca"/></el-icon>
            <span>个人主页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="5" class="leftb">
          <template #title>
            <el-icon><User style="color: #13c125"/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item><el-icon style="color: #e18773"><Message /></el-icon>我的消息</el-menu-item>
          <el-menu-item><el-icon style="color: #000000"><ZoomIn /></el-icon>我的拼车</el-menu-item>
          <el-menu-item  @click="router.push('/Home/History')" ><el-icon style="color: #0742b1"><Histogram /></el-icon>历史拼车</el-menu-item>
          <el-menu-item index = "/login"><el-icon style="color: #bf1515"><SwitchButton /></el-icon>注销</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!--嵌套路由-->
    <div style="flex:1;width: 0;background-color: #e5f8eb; padding: 5px">
     <RouterView  />
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {
  Histogram,
  HomeFilled, Message, Pointer, Position, SwitchButton, TrendCharts, User, ZoomIn
} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

//轮播图图片
import img1 from "@/assets/1.png";
import img2 from "@/assets/2.png";
import img3 from "@/assets/3.png";
import img4 from "@/assets/4.png";
import img5 from "@/assets/5.png";
import img6 from "@/assets/6.png";
import img7 from "@/assets/7.png";
import img8 from "@/assets/8.png";
import img9 from "@/assets/9.png";
const dynamicImages = [
  img1,
  img2,
  img3,
  img4,
  img5,
  img6,
  img7,
  img8,
  img9,
]

//小创意
const hh = () => {
  ElMessage({
    message:'气运+++1 好运+++1',
    type: 'success',
    duration: 3000,
    showClose: false
  })
}

</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
  text-align: center;
}

.leftb{
  margin-bottom: 1px;
  background-color: #fefefe;
  border: 1px solid #dce5f8;
  border-radius: 8px;
  box-shadow: 0 0 0 #e0e9f8;
}

</style>